<template>
	<view class="login">
		<view class="logo">
			<image src="/static/image/ying.png" mode="widthFix"></image>
		</view>

		<view class="text">
			欢迎登陆XX博客
		</view>

		<u--form labelWidth="30" labelPosition="left" :model="form" :rules="rules" ref="form">
			<u-form-item leftIcon="account" prop="name" ref="item1" v-if="isShow">
				<u--input clearable v-model="form.name" border="none" placeholder="请输入昵称"
					placeholderStyle="paddingLeft:10px"></u--input>
			</u-form-item>
			<u-form-item leftIcon="phone" prop="phone" ref="item1">
				<u--input clearable type="number" v-model="form.phone" border="none" placeholder="请输入手机号码"
					placeholderStyle="paddingLeft:10px"></u--input>
			</u-form-item>
			<u-form-item leftIcon="lock" prop="password" ref="item1">
				<u--input clearable type="password" v-model="form.password" border="none" placeholder="请输入密码"
					placeholderStyle="paddingLeft:10px"></u--input>
			</u-form-item>
			<u-form-item leftIcon="lock-fill" prop="password_two" ref="item1" v-if="isShow">
				<u--input clearable type="password" v-model="form.password_two" border="none" placeholder="请再次输入密码"
					placeholderStyle="paddingLeft:10px"></u--input>
			</u-form-item>
		</u--form>

		<u-button @click="login" class="login-btn" type="primary" v-if="!isShow">登陆</u-button>
		<u-button @click="register" class="login-btn" type="primary">注册</u-button>
	</view>
</template>

<script>
	import {
		login,
		register
	} from '@/config/api.js'
	import {
		mapMutations
	} from 'vuex'

	export default {
		name: "login",
		data() {
			return {
				form: {
					phone: "",
					password: "",
					password_two: "",
					name: ""
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: "请填写昵称",
						trigger: ['blur', 'change']
					},
					phone: {
						type: 'string',
						required: true,
						length: 11,
						message: "请填写手机号",
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						min: 6,
						max: 20,
						required: true,
						message: "请填写6～20位的密码",
						trigger: ['blur', 'change']
					},
					password_two: {
						type: 'string',
						validator: (rule, value, callback) => {
							return this.form.password !== "" && this.form.password == value;
						},
						required: true,
						message: "密码与第一次输入不符",
						trigger: ['blur']
					}
				},
				isShow: null,
			};
		},
		methods: {
			...mapMutations(['setUser']),
			async login() {
				try {
					await this.$refs.form.validate()

					const user = await login(this.form)

					//	如果登陆失败，将异常告知给用户
					if (user.data.code !== 200) return uni.showToast({
						title: user.data.msg,
						icon: "error"
					})
					this.setUser(user.data.data)
					uni.showToast({
						title: "登陆成功"
					})
					uni.switchTab({
						url: "/pages/my/my"
					})
				} catch (e) {
				}
			},
			async register() {

				if (this.isShow) {
					try {
						const res = await register(this.form)
						if (res.data.code !== 200) return uni.showToast({
							title: res.data.msg,
							icon: "error"
						})
						uni.showToast({
							title: "注册成功"
						})
						this.login()
					} catch(e) {
				}
				}
				this.isShow = true
			},
			isIconTwo(e) {
				if (this.form.password_two == "") return
				this.isIconisPasswordTow = "eye"
			}
		}
	}
</script>

<style lang="scss">
	.login {
		width: 80vw;
		height: 65vh;
		margin: 0 auto;
		padding: 30px;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10px;

		.logo {
			width: 20vh;
			margin: 0 auto;

			image {
				width: 100%;
			}
		}

		.text {
			margin-top: 10px;
			font-size: 26px;
			font-weight: 600;
			text-align: center;
		}

		::v-deep .uni-input-input {
			width: 90%;
			border-radius: 4px;
			border: 1px solid #dcdfe6;
			padding: 0px 10px;
			border-color: rgb(242, 174, 39);
			box-sizing: border-box;
		}

		::v-deep .u-input__content__field-wrapper__field {
			height: 38px;
		}

		::v-deep .u-input__content__subfix-icon {
			position: absolute;
			right: 8vw;
		}

		::v-deep .u-input__content__clear {
			position: absolute;
			right: 16vw;
		}

		.login-btn {
			margin-top: 20px;
			border-radius: 10px !important;
			background: linear-gradient(to right, #d1c2d3, #ffb5cb, #ffb091);
			border: none !important;
		}
	}
	
 /*	#ifdef MP-WEIXIN */
	// button{
	// 	margin-top: 20px;
	// 	border-radius: 10px;
	// 	background: linear-gradient(to right, #d1c2d3, #ffb5cb, #ffb091);
	// 	border: none;
	// }

/* #endif */
</style>
